<!--
 * @Author: your name
 * @Date: 2022-03-30 09:48:21
 * @LastEditTime: 2022-03-30 09:49:54
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geyao\geyao\单体模式应用弹框220330.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单体模式应用弹框</title>
</head>

<body>
  <div id="Id">我是歌谣</div>
  <script>
    // 实现单体模式弹窗
    var createWindow = (function () {
      var div;
      return function () {
        if (!div) {
          div = document.createElement("div");
          div.innerHTML = "我是弹窗内容";
          div.style.display = 'none';
          document.body.appendChild(div);
        }
        return div;
      }
    })();
    document.getElementById("Id").onclick = function () {
      // 点击后先创建一个div元素
      var win = createWindow();
      win.style.display = "block";
    }
  </script>
</body>

</html>